<template>
    <!-- 支付通道实例 -->
    <div class="cashier-list">
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "支付通道实例", "url": "/payways-case-list"}]'></tz-breadcrumb>
        <!-- 搜索表单 -->
        <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="">
            <!-- 商家名称 -->
            <div class="form-item">
                
                <el-input class="form-input" placeholder="店铺名称" clearable v-model="store_name" size="medium"></el-input>
            </div>
            <!-- 通道实例ID -->
            <div class="form-item">

                <el-input class="form-input" placeholder="通道实例ID" clearable v-model="ways_id" size="medium"></el-input>
            </div>
            <!-- 通道类型 -->
            <div class="form-item">

              <el-select name="payways_type" v-model="payway" placeholder="请选择 通道类型">
              <!--<el-select name="payways_type" placeholder="请选择 通道类型">-->
                <el-option label="支付宝" value="alipay"></el-option>
                <el-option label="微信" value="weixin"></el-option>
                <el-option label="银行卡" value="sfbank"></el-option>
              </el-select>
            </div>
            <el-button type="primary" native-type='submit'>查询</el-button>
        </form>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>通道实例列表</span>
            <el-button  style="float: right;" type="success" plain @click="addcasePages()">添加通道实例</el-button>
          </div>
        <el-table :data="tableData"  v-loading="loading" style="width: 100%;padding-bottom: 30px;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <!--<el-form-item label="店铺名称:">-->
                  <!--<span>{{ props.row.store_name }}</span>-->
                <!--</el-form-item>-->
                <el-form-item label="收银员账号:">
                  <span>{{ props.row.store_cashier_phone}}</span>
                </el-form-item>
                <el-form-item label="费率:">
                  <span>{{ props.row.rate }}</span>
                </el-form-item>
                <el-form-item label="当面付费率:">
                  <span>{{ props.row.face_pay_rate }}</span>
                </el-form-item>
                <!-- 操作 -->
                <el-form-item label="操作:">
                    <el-button type="success" plain v-if="props.row.payways_status" @click="paywaysEdit( props.row.ways_id,props.row.store_code,'payways_status', 0, props.$index )" size="mini">已开启支付通道</el-button>
                    <el-button type="danger" plain v-if="props.row.payways_status === 0" @click="paywaysEdit( props.row.ways_id,props.row.store_code,'payways_status', 1, props.$index )" size="mini">已关闭支付通道</el-button>
                    <el-button type="success" plain v-if="props.row.receivables" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'receivables', 0, props.$index)" size="mini">已开启收款</el-button>
                    <el-button type="danger" plain v-if="props.row.receivables === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'receivables', 1, props.$index)" size="mini">已关闭收款</el-button>
                    <el-button type="success" plain v-if="props.row.refunt_status" @click="paywaysEdit( props.row.ways_id,props.row.store_code,'refunt_status', 0, props.$index )" size="mini">已开启退款</el-button>
                    <el-button type="danger" plain v-if="props.row.refunt_status === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'refunt_status', 1, props.$index)" size="mini">已关闭退款</el-button>
                    <el-button type="success" plain v-if="props.row.deposit_impower" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'deposit_impower', 0, props.$index)" size="mini">已开启预授权</el-button>
                    <el-button type="danger" plain v-if="props.row.deposit_impower === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'deposit_impower', 1, props.$index)" size="mini">已关闭预授权</el-button>
                    <el-button type="success" plain v-if="props.row.revoke_fundauth" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'revoke_fundauth', 0, props.$index)" size="mini">已开启撤销预授权</el-button>
                    <el-button type="danger" plain v-if="props.row.revoke_fundauth === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'revoke_fundauth', 1, props.$index)" size="mini">已关闭撤销预授权</el-button>
                    <el-button type="success" plain v-if="props.row.fundauth_pay" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'fundauth_pay', 0, props.$index)" size="mini">已开启结算</el-button>
                    <el-button type="danger" plain v-if="props.row.fundauth_pay === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'fundauth_pay', 1, props.$index)" size="mini">已关闭结算</el-button>
                    <el-button type="success" plain v-if="props.row.ewn_impower" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'ewn_impower', 0, props.$index)" size="mini">已开启扫码授权</el-button>
                    <el-button type="danger" plain v-if="props.row.ewn_impower === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'ewn_impower', 1, props.$index)" size="mini">已关闭扫码授权</el-button>
                    <el-button type="success" plain v-if="props.row.tomorrow_settlement" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'tomorrow_settlement', 0, props.$index )" size="mini">已开启隔日结算</el-button>
                    <el-button type="danger" plain v-if="props.row.tomorrow_settlement === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'tomorrow_settlement', 1, props.$index)" size="mini">已关闭隔日结算</el-button>
                    <el-button type="success" plain v-if="props.row.sms_pre_authorization" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'sms_pre_authorization', 0, props.$index)" size="mini">已开启短信预授权</el-button>
                    <el-button type="danger" plain v-if="props.row.sms_pre_authorization === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'sms_pre_authorization', 1, props.$index)" size="mini">已关闭短信预授权</el-button>
                    <el-button type="success" plain v-if="props.row.add_settlement" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'add_settlement', 0, props.$index)" size="mini">已开启追加结算</el-button>
                    <el-button type="danger" plain v-if="props.row.add_settlement === 0" @click="paywaysEdit(props.row.ways_id,props.row.store_code,'add_settlement', 1, props.$index)" size="mini">已关闭追加结算</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
              <!-- 显式数据 -->
          <el-table-column label="实例ID" prop="payType">
            <template slot-scope="scope">
              {{scope.row.ways_id}}
            </template>
          </el-table-column>
          <el-table-column label="商户名称" prop="">
            <template slot-scope="scope">
              {{scope.row.store_name ? scope.row.store_name : '--'}}
            </template>
          </el-table-column>
          <el-table-column label="通道类型" prop="">
            <template slot-scope="scope">
              {{scope.row.payways_type | PaywayType}}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="">
            <template slot-scope="scope">
              {{scope.row.time}}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="">
            <template slot-scope="scope">
              {{scope.row.status == 1 ? '开启' : '关闭'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template slot-scope="scope">
              <el-button type="primary" plain size="small" @click="detailsPages(scope.row.ways_id)">详情</el-button>
            </template></el-table-column>
        </el-table>
            <el-pagination v-if="total > limit" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>

        </el-card>
        <!-- tab展开行，隐式数据 -->
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    this.onSubmit();
  },
  data: function () {
    return {
      // 店铺名称
      store_name: '',
      // 通道实例ID
      ways_id: '',
      // 支付类型
      payway: '',
      // 要修改的key
      paywayIndex: 0,
      // 所属商户
      // storeName: '',
      // 收银员帐号
      // account: '',
      // 支付方式
      payTypeOptions: {
        ways_id: '',
        store_code: '',
        field: '',
        value: '',
        pass: ''
      },
      // payType: 'all',
      // 交易状态
      PaywayType: {
        'alipay': '支付宝',
        'weixin': '微信',
        'sfbank': '银行卡'
      },
      // orderStatus: 'all',
      // 收银员列表数据
      tableData: [],
      // 当前页
      page: 1,
        // 每页数量
      limit: 10,
      total: 0,
      loading: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  filters: {
    PaywayType (val) {
      let type = {
        'alipay': '支付宝',
        'weixin': '微信',
        'sfbank': '银行卡'
      };
      let src = '';
      src = type[val];
      return src;
    }
  },
  methods: {
    // 提交搜索
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.requestData();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.requestData();
    },
    requestData () {
      let that = this;
      that.loading = true;
      http.post(api.getQueryStoreWaysAll, {
        token: localStorage.getItem('token'),
        store_name: that.store_name,
        ways_id: that.ways_id,
        payway: that.payway,
        limit: that.limit,
        page: that.page
      }, response => {
        console.log(response);
        that.loading = false;
        if (response.code === 10001 || response.code === '10001') {
          that.tableData = response.data[0].res.data;
          that.total = response.data[0].res.total;
        } else {
          that.tableData = [];
          that.total = 0;
        }
      }, err => {
        that.loading = false;
        console.log(err);
      });
    },
    // 记录详情
    detailsPages (id) {
      this.$router.push({
        path: '/payways-case-details',
        query: {
          ways_id: id
        }
      });
    },
    // 添加通道实例
    addcasePages () {
      this.$router.push({
        path: '/payways-case-add'
      });
    },
    // 添加通道实例
    paywaysEdit (waysId, storeCode, field, value, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.ways_id = waysId;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.field = field;
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    paywaysStatusEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'payways_status';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    receivablesEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'receivables';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    refuntStatusEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'refunt_status';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    depositImpowerEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'deposit_impower';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    revokeFundauthEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'revoke_fundauth';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    fundauthPayEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'fundauth_pay';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    ewnImpowerEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'ewn_impower';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    tomorrowSettlementEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'tomorrow_settlement';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    smsPreAuthorizationEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'sms_pre_authorization';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    // 添加通道实例
    addSettlementEdit (id, value, storeCode, type, paywayIndex) {
      let that = this;
      that.paywayIndex = paywayIndex;
      that.payTypeOptions.store_code = storeCode;
      that.payTypeOptions.type = type;
      that.payTypeOptions.id = id;
      that.payTypeOptions.field = 'add_settlement';
      that.payTypeOptions.value = value;
      that.editConfirmPass();
    },
    editConfirmPass (val) {
      let that = this;
      val;
      // that.$prompt('请输入修改密码', '', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   inputType: 'password'
      // }).then(({ value }) => {
      //   that.payTypeOptions.pass = value;
      //   that.paywaysRuleSave();
      // }).catch(() => {
      //   that.$message({
      //     type: 'info',
      //     message: '取消输入'
      //   });
      // });
      that.paywaysRuleSave();
    },
    paywaysRuleSave () {
      let that = this;
      http.post(api.RuleSave, {
        token: localStorage.getItem('token'),
        saveType: 'way',
        ways_id: that.payTypeOptions.ways_id,
        store_code: that.payTypeOptions.store_code,
        fields: that.payTypeOptions.field,
        value: that.payTypeOptions.value
      }, response => {
        console.log(response);
        if (response.code === 10001 || response.code === '10001') {
          // that.tableData[that.paywayIndex].rule_id = response.data[0].res;
          that.tableData[that.paywayIndex][that.payTypeOptions.field] = that.payTypeOptions.value;
          that.$message({
            message: '修改成功',
            type: 'success'
          });
        } else {
          that.$message({
            message: response.msg,
            type: 'warning'
          });
        }
      }, err => {
        console.log(err);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .form-item
    display: inline-block
    margin-right: 35px
    label
      margin-right: 4rem
      font-size: 14px
      color: #333
    .form-input
      max-width: 15rem
  .line
    height: 4.5rem
.demo-table-expand
  font-size: 0
  label
    width: 90px
    color: #99a9bf
  .el-form-item 
    margin-right: 0
    margin-bottom: 0
    width: 50%
.pager
  padding: 0
</style>
